<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getClassSearch } from '../api/class/classSearch'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { getimage } from '../hooks/image'

export default defineComponent({
  components: {},
  setup() {
    let router = useRouter()
    let route = useRoute()
    const loading = ref(false)
    const finished = ref(false)
    const list: any = ref([])
    let back = () => {
      router.push({
        path: '/class'
      })
    }
    // interface searchResult {
    //     avatar: string,
    //     categoryName: string,
    //     groupId: number,
    //     groupName: string,
    //     lessonCount: number,
    //     memberCount: number,
    //     price: number,
    //     ownerName:string
    // };
    let val: any = ref('')
    val.value = route.query.val
    // let searchResultList=ref<Array<searchResult>|null>()
    let searchResultList: any = ref(null)
    let getClassSearchFun = (val: string) => {
      getClassSearch(val).then((data) => {
        console.log('搜索结果data=>', data)
        searchResultList.value = data.data.groups.itemList
        console.log('搜索结果searchResultList=>', searchResultList.value)
      })
    }
    let click_class = (groupId: number, price: number) => {
      router.push({
        path: '/classDes',
        query: {
          groupId,
          price: price,
          val: val.value
        }
      })
    }
    let count = 0
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求;

      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          if (count * 10 + i >= searchResultList.value.length) {
            finished.value = true
            return
          }

          list.value.push(searchResultList.value[count * 10 + i])
          console.log('list=>', list)
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= searchResultList.length) {
          finished.value = true
        }
        count += 1
      }, 1000)
    }
    watch(val, () => {
      console.log('val=>', val)
      getClassSearchFun(val.value)
    })
    onMounted(() => {
      if (route.query.val) {
        val.value = route.query.val
        getClassSearchFun(val.value)
      }
    })
    return {
      val,
      searchResultList,
      click_class,
      viewCount,
      getimage,
      onLoad,
      loading,
      finished,
      list,
      back
    }
  }
})
</script>
<template>
  <div>
    <!-- 搜索框开始 -->
    <div class="search-input-box">
      
      <div class="iconfont icon-sousuo1"></div>
      <input
        type="search"
        placeholder="搜索课程"
        class="search-input iconfont icon-sousuo1"
        autofocus
        v-model="val"
      />
      <div class="search-cancel" @click="back">取消</div>
    </div>
    <div class="classlist" v-if="val != '' && searchResultList">
      <ul>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li
            @click="click_class(item.groupId, item.price)"
            v-for="item in list"
            :key="item.groupId"
          >
            <div
              class="classimg"
              :style="'background: url(' + getimage(item.avatar) + ') no-repeat 50% 50%/100%'"
            >
              <!-- // <img :src="getimage(item.avatar)" alt="" /> -->
            </div>
            <div class="list-right">
              <div class="smalltag" v-if="item.categoryName">
                <span>{{ item.categoryName }}</span>
              </div>
              <span>{{ item.groupName }}</span>
              <div class="list-count one-text-cut">
                {{ item.ownerName }} | {{ item.lessonCount }}课时 |
                {{ viewCount(item.memberCount) }}人在学习
              </div>
              <div class="price" v-if="item.price">￥{{ item.price }}</div>
              <div class="price" v-else>免费</div>
            </div>
          </li>
        </van-list>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search-input-box {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 10px 15px;
  margin-top: 15px;
  .search-input {
    padding: 7px 0 7px 35px;
    height: 30px;
    line-height: 16px;
    box-sizing: border-box;
    font-size: 14px;
    background: #ffffff;
    border-radius: 20px;
    border: 0px;
    background: #f1f1f1;
    color: #b5b3b3;
    width: 86%;
  }
  & > div:nth-child(1) {
    width: 10%;
    padding: 0 0 0 12px;
    position: absolute;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
  }
  .search-cancel {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
  }
}
.classlist {
  padding: 0 15px;
  ul {
    li {
      display: flex;
      margin-bottom: 15px;
      .classimg {
        width: 140px;
        height: 90px;
        flex-shrink: 0;
        img {
          width: 146px;
          height: 90px;
        }
      }
      .list-right {
        margin-left: 10px;
        .smalltag {
          display: inline-block;
          background: #464d5c;
          padding: 1px 2px;
          line-height: 15px;
          margin-right: 2.5px;
          color: #fff;
          font-size: 12px;
          span {
            display: inline-block;
            transform: scale(0.9);
          }
        }
        & > span {
          font-size: 14px;
        }
        .list-count {
          color: #687583;
          font-size: 12px;
          line-height: 30px;
          width: 196px;
        }
        .price {
          color: #ff3271;
          font-weight: 700;
          font-size: 14px;
        }
      }
    }
  }
}
</style>